<template>
	<view class="page">
		<view class="page-top">
			<view class="header-img" v-if="!!img">
				<image :src="img" mode="widthFix"/>
			</view>
			<view class="service-title">{{service.title}}</view>
			<view class="service-info">
				<view class="service-status">{{service.status}}</view>
				<view class="service-count">
					<view class="count">招募名额：{{service.applycount}}</view>
					<view class="count">已报名数：{{service.readycount}}</view>
					<view class="count">浏览量：{{service.readycount}}</view>	
				</view>
			</view>
		</view>
		<view class="servic-time">
			<view class="servic-time-tag">
				<view class="tag"></view>
				<view>活动时间：</view>
			</view>
			<view class="servic-start-time">{{formatDate(service.start_time)}}</view>
			<view class="servic-start-time">{{formatDate(service.end_time)}}</view>
		</view>
		<view
			v-if="service.applyStatus && service.applyStatus !== 1"
			class="line"
			:style="{bottom: bottom + 'rpx'}"
		>
			<button size="mini" @click="toSignUp(service.id)">
				我要报名
			</button>
		</view>
		<view class="detail-content">
			<rich-text :nodes="formatContent(service.content)"></rich-text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				param:{},
				service:{},
				img: '',
				bottom: 0
			}
		},
		onLoad(option){
			this.param.id = option.id
			this.getServiceDetail()
			const { screenHeight, safeArea } = uni.getSystemInfoSync()
			const { bottom } = safeArea
			this.bottom = screenHeight - bottom || 0
		},
		methods: {
			getServiceDetail(){
				this.param.token = uni.getStorageSync("token");
				this.http.get({
					url:'/index.php/Wxapp/Bussniss/detail',
					data:this.param
				}).then(resp=>{
					this.service = resp.data;
					this.img = this.domain + this.service.img
					console.log("服务明细：",resp)
				}).catch(err=>{
					console.log("请求服务明细失败：",err)
				})
			},
			formatDate(date){
				if(date == null){
					return null
				}
				return date.length > 10? date.substr(0,10) : date
			},
			formatContent(content){
				if(content == null){
					return;
				}

				const reg = new RegExp("<img", "gi");
				const reg2 = new RegExp("&lt;", "gi");
				const reg3 = new RegExp("&gt;", "gi");
				const reg4 = new RegExp("&quot;", "gi");
				return content
					.replace(reg2, `<`)
					.replace(reg3, `>`)
					.replace(reg4, `'`)
					.replace(reg, `<img width="100%"`);
			},
			getImageUrl(src){
				return this.domain + src;
			},
			//报名
			toSignUp(bid){
				let token = uni.getStorageSync("token");
				let user_id = uni.getStorageSync("user_id")
				console.log("user_id:" + user_id)
				console.log("bid:" + bid)
				this.http.post({
					url:'/index.php/Wxapp/Apply/ToSignUp',
					data:{
						"token":token,
						"user_id":user_id,
						"bid":bid
					}
					
				}).then(resp=>{
					this.service.applyStatus = 1;
					uni.showModal({
						content:"报名成功"
					})
					console.log("报名：",resp)
				}).catch(err=>{
					uni.showModal({
						content:"报名失败"
					})
					console.log("请求服务明细失败：",err)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>	
	.page{
		width: 100%;
		height: 100%;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		background-color: $global_bg_color;
		font-size: 22rpx;
		
		.page-top{
			background-color: #FFFFFF;
			padding: 0rpx 15rpx 15rpx 15rpx;
			.header-img {
				margin-top: 10rpx;
				img {
					border-radius: 15rpx;
					width: 100%;
				}
			}
			.service-title {
				font-weight: bold;
				font-size: 30rpx;
				align-items: center;
				margin-top: 15rpx;
			}
			.service-info {
				display: flex;
				width: 100%;
				height: 48rpx;
				justify-content: space-between;
				align-items: center;
				margin-top: 15rpx;
				.service-status{
					border: 1rpx solid #ffaa00;
					color: #E68A00;
					height: 38rpx;
					line-height: 38rpx;
					padding: 0 15rpx;
					border-radius: 8rpx;
				}
				.service-count {
					display: flex;
					height: 38rpx;
					line-height: 38rpx;
					.count{
						margin-left: 10rpx;
					}
				}
			}
		}
		
		.servic-time{
			margin-top: 10rpx;
			padding: 15rpx;
			background-color: #FFFFFF;
			.servic-time-tag{
				display: flex;
				align-items: center;
				.tag {
				  width: 5px;
				  height: 15px;
				  margin-right: 10px;
				  border-radius: 5px;
				  background: orange;
				}
			}
			.servic-start-time {
				margin-left: 15rpx;
			}
		}
		
		
		.line{
			position: fixed;
			width: 100%;
			display: flex;
			padding: 20rpx 0;
			background: #fff;
			box-shadow: 0 -5rpx 5rpx rgba($color: #000, $alpha: 0.01);
			button {
				width: 40%;
				height: 80rpx;
				line-height: 80rpx;
				background: #E76625;
				color: #fff;
			}
			.title {
				width: 180rpx;
			}
			.content {
				flex: 1;
				text-align: right;
			}
		}
		.detail-content {
			margin: 10rpx 0;
			background-color: #fff;
			padding: 15rpx;
			.title {
				width: 100%;
				text-align: center;
			}
		}
		
		rich-text{
			background-color: #FFF;
		}
	}
	

</style>
